<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>默认绑定和显示绑定的区别(The difference between default binding and display binding)</title>
  <!-- 
  在JavaScript中，this关键字的行为取决于函数的调用方式。理解this的默认绑定和隐式绑定是掌握JavaScript上下文的重要部分。
  一、默认绑定（Default Binding）
  - 定义：默认绑定是指在没有明确绑定this的情况下，this的值会根据调用上下文来决定。
  - 规则：
    - 在非严格模式下，如果函数作为全局函数调用（即不在对象中调用），则this指向全局对象（在浏览器中是window）。
    - 在严格模式下，如果函数没有绑定上下文，this的值为undefined。
    function showThis() {
      console.log(this);
    }

    showThis(); // 在非严格模式下，输出: Window 对象

  二、隐式绑定（Implicit Binding）
  - 定义：隐式绑定是指当一个函数作为对象的方法调用时，this的值指向该对象。
  - 规则：
    - 当通过对象调用方法时，this指向调用该方法的对象。
    - 如果在方法内部再次调用该方法，this仍然指向原对象。
    const obj = {
      name: 'Alice',
      showName: function() {
        console.log(this.name);
      }
    };

    obj.showName(); // 输出: Alice

  三、总结
  1. 默认绑定：
    - 在没有明确绑定的情况下，this的值取决于函数的调用方式。
    - 在非严格模式下，this指向全局对象；在严格模式下，this为undefined。

  2. 隐式绑定：
    - 当函数作为对象的方法调用时，this指向该对象。
    - 适用于希望在对象上下文中访问属性和方法的场景。
   -->
</head>
<body>

  <script>
    // 默认绑定
    function showThis() {
      console.log(this);
    }

    showThis(); // 在非严格模式下，输出: Window 对象

    // 隐式绑定
    const obj = {
      name: 'Alice',
      showName: function() {
        console.log(this.name);
      }
    };

    obj.showName(); // 输出: Alice

  </script>
  
</body>
</html>